<template>
<div class="listOut">
  <HeaderView />
  <div class="listMain">
  <div class="listNav">
      <!-- 左侧 -->
      <ListLeft @itemid="myitemId"/>
  </div>
    <div class="listCon">
       <!-- 右侧 -->
      <ListRight :hhh="myCid" />
    </div>
  </div>
  <TabBar />
</div>
</template>

<script>
import ListLeft from './children/ListLeft.vue'
import ListRight from './children/ListRight.vue'
import HeaderView from '@/components/HeaderView.vue'
import TabBar from '@/components/tabBar/TabBar.vue'
export default {
  components: {
    HeaderView,
    TabBar,
    ListLeft,
    ListRight
  },
  data () {
    return {
      myCid: 47
    }
  },
  methods: {
    myitemId (e) {
      console.log(e)
      this.myCid = e
    }
  }
}
</script>

<style lang="less" scoped>
.listMain{
  width: 100%;
  height: calc(100vh - 2rem);
  overflow: hidden;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  .listNav{
    // flex:1.3;
    width: 22%;
    background-color: #ccc
  }
  .listCon{
    // flex:4;
    width: 78%;
  }
}
</style>
